<template>
  <div class="cargo-owner-box">
    <nav-bar title="货主详情" />
    <div class="cargo-owner-body">
      <div class="means">
        <van-row justify="center">
          <van-col span="6">
            <img src="../../assets/image/header.png" alt="" class="photo" />
          </van-col>
        </van-row>
        <van-cell-group inset class="person-msg">
          <van-cell title="货主姓名" :value="msgList.name" />
          <van-cell title="实名认证">
            <template #value>
              <span class="iconfont reputation" v-if="msgList.examineStatus === 1">&#xe60a;</span>
              <span v-else>待认证</span>
            </template>
          </van-cell>
          <van-cell title="货主类型" :value="msgList.consType">
            <template #value>
              <span>{{ msgList.consType === 1 ? '个人' : '企业' }}</span>
            </template>
          </van-cell>
          <van-cell title="好评率">
            <template #value>
              <van-rate v-model="stars" color="#FFCA2C" readonly />
            </template>
          </van-cell>
          <van-cell title="联系方式" :value="msgList.consignerContact?.contactPhone" />
          <van-cell title="注册日期" :value="msgList.createTime" />
          <van-cell title="联系地址" :value="msgList.detailAddress" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted } from 'vue'
import { useRouter, useRoute, LocationQueryValue } from 'vue-router'
import NavBar from '@/components/NavBar.vue'

interface State {
  msgList: any
  stars: number
}

export default defineComponent({
  name: 'CargoOwner',
  components: { NavBar },
  setup() {
    const route = useRoute()
    // 获取路由参数
    const { msgList } = route.params

    const state = reactive<State>({
      msgList: {},
      stars: 5
    })
    state.msgList = { ...state.msgList, ...JSON.parse(msgList as string) }

    return { ...toRefs(state) }
  }
})
</script>

<style lang="scss" scoped>
@import '@/style/variables.scss';
@import '@/style/mixins.scss';
.cargo-owner-box {
  background-color: $background-color-base;
  min-height: 100%;
  position: relative;

  .cargo-owner-body {
    padding: 0 10px 30px;
    box-sizing: border-box;
  }

  // 货主基本信息
  .means {
    margin-top: 20px;
    .photo {
      width: 100%;
      height: 100%;
    }
    .person-msg {
      margin: 20px 0;
      ::v-deep(.van-cell__value) {
        flex: 3;
      }
      .reputation {
        font-size: 20px;
        color: #ff6459;
      }
    }
  }
}
</style>
